<template>
  <div class="box" :style="bgStyle">
    <el-card class="box-card">
      <div class="box_top">
        <h2>HT后台管理系统v3</h2>
      </div>
      <component :is="typeOperation === 'login' ? loginElemnt : registerElement"/>
    </el-card>
  </div>
</template>

<script setup>
import loginBg from '@/assets/loginBg.jpg'
const typeOperation = ref('login')
const loginElemnt = defineAsyncComponent(() => import('@/components/auth/loginElement.vue'))
const registerElement = defineAsyncComponent(() => import('@/components/auth/registerElement.vue'))
const bgStyle = reactive(
    {
      backgroundImage: `url(${loginBg})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      height: '100vh',      // 确保高度撑满视口
      display: 'flex',
      justifyContent: 'center',
    }
)
</script>

<style scoped lang="scss">
.box {
  width: 100%;
}

.box-card {
  width: 550px;
  height: 450px;
  border-radius: 30px;
  margin-top: 120px;

  .box_top {
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
  }
}
</style>
